<template>
  <div class="serviceManagement">
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item>
          <el-input
            placeholder="业务线名称"
            v-model="queryData.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.closeState"
            placeholder="业务线状态"
            clearable
          >
            <el-option label="未关闭" value="0"></el-option>
            <el-option label="已关闭" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handlerSearch">查询</el-button>
          <el-button type="primary" @click="handlerAddBtn"
            >新增业务线</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" v-loading="loading">
      <el-row :gutter="20">
        <transition-group
          name="animate__animated animate__bounce"
          enter-active-class="animate__swing"
          leave-active-class="animate__rotateOutDownLeft"
          :appear="true"
        >
          <el-col :span="6" v-for="item in serviceList" :key="item.id">
            <el-card shadow="hover">
              <div
                class="border tran"
                :class="item.closeState == 0 ? 'blue' : 'gray'"
                @click="handlerOpenItem(item)"
              >
                <div
                  :class="
                    item.closeState == 0 ? 'blueText tran' : 'grayText tran'
                  "
                >
                  {{ item.name }}
                </div>
                <div class="center">
                  <p>{{ item.createDate }}</p>
                  <p>{{ item.userName }} 共{{ item.common }}项目</p>
                </div>
                <div class="icon">
                  <i
                    @click.stop="handlerEditBtn(item)"
                    v-show="item.closeState == 0"
                    class="el-icon-edit"
                  ></i>
                  <i
                    @click.stop="handlerCloseService(item)"
                    v-show="item.closeState == 0"
                    class="el-icon-switch-button"
                  ></i>
                </div>
              </div>
            </el-card>
          </el-col>
        </transition-group>
      </el-row>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :page.sync="queryData.pageNum"
        :limit.sync="queryData.pageSize"
        @pagination="getService"
      />
    </el-card>
    <!-- 添加弹窗 -->
    <AddService
      :addDialogVisible="addDialogVisible"
      @addServiceCancel="addServiceCancel"
      @addService="addService"
    />
    <!-- 修改弹窗 -->
    <EditService
      :editDialogVisible="editDialogVisible"
      :editForm="editForm"
      @editServiceCancel="editServiceCancel"
      @editService="editService"
    />
  </div>
</template>
<script>
// 导入接口文件
import {
  getServiceList,
  addService,
  editService,
  updateCloseState,
} from "../../api/service";

import Pagination from "../../components/Pagination/index.vue";
import AddService from "./components/addService.vue";
import EditService from "./components/editService.vue";
export default {
  components: {
    Pagination,
    AddService,
    EditService,
  },
  data() {
    return {
      loading: true,
      val: "",
      total: 0, //总条数
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        name: "", //角色名称
        closeState: "", //状态
      }, //请求参数
      addDialogVisible: false,
      editDialogVisible: false,
      region: "",
      editForm: {},
      serviceList: [],
    };
  },
  created() {
    this.getService();
  },
  methods: {
    // 获取数据
    getService() {
      getServiceList(this.queryData).then((res) => {
        if (res.status === 200) {
          this.loading = false;
          this.serviceList = res.data.records; //列表数据
          this.total = res.data.total; //总条数
          this.queryData.pageNum = res.data.current; //当前页
          this.queryData.pageSize = res.data.size; //每页显示条数
        }
      });
    },
    // 打开添加弹窗按钮
    handlerAddBtn() {
      this.addDialogVisible = true;
    },
    // 取消添加按钮
    addServiceCancel(valFalse) {
      this.addDialogVisible = valFalse;
    },
    //确认添加按钮
    addService(valList, valFalse) {
      addService(valList).then((res) => {
        if (res.status === 200) {
          this.getService();
          this.$message({
            message: "新增成功",
            type: "success",
          });
        }
      });
      this.addDialogVisible = valFalse;
    },
    // 打开修改弹窗按钮
    handlerEditBtn(item) {
      this.editDialogVisible = true;
      this.editForm = Object.assign({}, item); //将数据传入dialog页面
    },
    // 取消修改弹窗按钮
    editServiceCancel(valFalse) {
      this.editDialogVisible = valFalse;
    },
    // 确认修改弹窗按钮
    editService(valList, valFalse) {
      editService(this.editForm).then((res) => {
        if (res.status === 200) {
          this.getService();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
      this.editDialogVisible = valFalse;
    },
    // 结束业务线按钮
    handlerCloseService(item) {
      this.$confirm("确认关闭业务线，该业务线项目将全部结束?", "关闭提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateCloseState({ id: item.id }).then((res) => {
            if (res.status === 200) {
              this.getService();
              this.$message({
                type: "success",
                message: "关闭成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消关闭",
          });
        });
    },
    // 查询按钮
    handlerSearch() {
      this.getService();
    },
    // 打开所在项目
    handlerOpenItem(item) {
      this.$router.push({
        path: "/itemManagement/itemManagement",
        query: {
          businessId: item.id,
          businessName: item.name,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-card {
  margin: 20px;
}
.el-card .is-hover-shadow {
  border: 0px solid white;
}
.el-input {
  width: 260px;
}
.el-form {
  display: flex;
  justify-content: space-around;
}
.el-button {
  margin-right: 50px;
}
.border {
  width: 100%;
  height: 250px;
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 6px 0px 6px 0px;
    }
  }
  i {
    cursor: pointer;
    font-size: 20px;
  }
  i:hover {
    color: #487edc;
  }
  .el-icon-edit {
    padding-right: 35px;
  }
}
.blue {
  border: 6px solid #487edc;
}
.gray {
  border: 6px solid #d8d8d7;
}
.blueText {
  color: #487edc;
}
.grayText {
  color: black;
}
.tran {
  animation: wear 0.5s linear;
}
@keyframes wear {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
